<template>
  <div>
    <tabs :tabs="tabsList" :active="activeTab" @change="tabChange" type="fixed"></tabs>
    <div v-for="(item, index) in liveInfoList" :key="item.id">
      <div v-if="loadList.includes(index)" v-show="index === activeTab">
        <list :info="item"></list>
      </div>
    </div>
  </div>
</template>

<script>
import tabs from '@/components/common/Tab.vue';
import list from '@/components/live/ListPage.vue';
import query from '@/lib/query.js';
export default {
  components: { tabs, list },
  name: 'LiveList',
  data() {
    return {
      tabsList: [],
      liveInfoList: [],
      // 已加载过的列表
      loadList: [0],
      activeTab: 0,
    };
  },
  created() {
    this.$pageStatus.loading();
    this.initPage();
    window.statConf.click('live_more');
  },
  methods: {
    tabChange(index) {
      window.statConf.click('live_more.tab');
      this.activeTab = index;
      if (!this.loadList.includes(index)) {
        this.loadList.push(index);
      }
    },
    initPage() {
      query
        .getLiveTabs()
        .then(res => {
          this.$pageStatus.close();
          // 数据前端排序
          const authList = [];
          const noAuthList = [];
          const authDataList = [];
          const noAuthDataList = [];
          if (res.data) {
            res.data.forEach(e => {
              const row = {
                name: e.label_name,
                id: _Global.tabMap[e.sid] || 'default',
              };
              if (e.label_id) {
                authList.push(row);
                authDataList.push(e);
              } else {
                noAuthList.push(row);
                noAuthDataList.push(e);
              }
            });
            this.tabsList = authList.concat(noAuthList);
            this.liveInfoList = authDataList.concat(noAuthDataList);
          }
        })
        .catch(err => {
          this.mixinErrHandler(err, this.reload);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.reviews-container {
  padding: 0.32rem 0.32rem 0.68rem 0.44rem;
}
.card-bg {
  background: #ffffff;
  border-radius: 0.12rem;
  margin-top: 0.16rem;
  position: relative;
}
.go-wechat {
  height: 0.56rem;
  padding: 0 0.12rem;
  border: 1px solid #ff2a2a;
  border-radius: 0.08rem;
  font-size: 0.28rem;
  color: #ff0000;
  line-height: 0.56rem;
  margin-top: 0.46rem;
  display: flex;
  align-items: center;
  .icon-wechat {
    width: 0.32rem;
    height: 0.32rem;
    background-image: url(../assets/images/wechat.svg);
    background-size: 100% 100%;
    display: flex;
    margin-right: 0.04rem;
  }
}
.lecturer-intro {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  .intro-head {
    display: flex;
    height: 0.5rem;
    align-items: center;
    .intro-name {
      font-size: 0.36rem;
      height: 0.5rem;
      line-height: 0.5rem;
      color: #000000;
      font-weight: 500;
      margin-right: 0.08rem;
    }
    .intro-code {
      height: 0.28rem;
      font-size: 0.2rem;
      line-height: 0.28rem;
      color: rgba(0, 0, 0, 0.5);
      white-space: nowrap;
    }
  }
}
.reviews-head {
  height: 0.76rem;
  font-size: 0.32rem;
  padding-left: 0.24rem;
  padding-right: 0.16rem;
  color: #000000;
  display: flex;
  align-items: center;
  background-color: white;
  .liveTime {
    height: 0.32rem;
    font-size: 0.24rem;
    color: rgba(0, 0, 0, 0.3);
    line-height: 0.32rem;
    padding: 0 0.02rem;
  }
  span {
    margin-right: 0.16rem;
  }
  .reviews-status {
    height: 0.76rem;
    line-height: 0.76rem;
    font-size: 0.32rem;
    color: #000000;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-grow: 1;
    .liveTime {
      height: 0.32rem;
      font-size: 0.24rem;
      color: rgba(0, 0, 0, 0.3);
      line-height: 0.32rem;
      padding: 0 0.02rem;
    }
    span {
      margin-right: 0.16rem;
    }
  }
}

.wrap {
  display: flex;
  .blue {
    color: #5c78cc;
  }
}
.checked {
  .text {
    max-height: none;
    .btn {
      display: none;
    }
  }
}
.text {
  max-height: 0.8rem;
  overflow: hidden;
  word-break: break-all;
  text-align: justify;
  line-height: 0.4rem;
  position: relative;
  font-size: 0.28rem;
  color: rgba(0, 0, 0, 0.5);
  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
  }

  &::before {
    content: '';
    float: right;
    width: 0; /*设置为0*/
    height: 100%;
    margin-bottom: -0.39rem;
  }
  .btn {
    float: right;
    clear: both;
    /* 本身的装饰样式*/
    height: 0.4rem;
    font-size: 0.28rem;
    color: rgba(0, 0, 0, 0.5);
    line-height: 0.4rem;
  }
}
.reviews-scroll-body {
  background: white;
}
</style>
